<!-- 菜单 -->
<template>
  <div class="menu-page">
    <Poptip float
            :style="popStyled"
            arrow>
      <HandleHeight named="handleT"
                    @onEvent="HandleChange" />
      <div class="menu-page-box">
        <HandleWidth named="handleL"
                     @onEvent="HandleChange" />
        <div class="menu-page-body">
          <div class="menu-page-title">= Menu = 拖我边框试试</div>
          <Menu :data="the.data"
                @onEvent="onMenuEvent" />
        </div>
        <HandleWidth @onEvent="HandleChange" />
      </div>
      <HandleHeight @onEvent="HandleChange" />
    </Poptip>

  </div>
</template>

<script>

export default {
  setup () {
    const { reactive, ref } = window.$plus.vue;
    /** 组件参数 */
    const the = reactive({

      data: [
        {
          icon: 'icon-rili',
          path: '/workplace',
          title: '工作台',
          // 子菜单
          children: [
            { icon: 'icon-menu', path: '/TestTree', title: '树列表', dot: true },
            {
              icon: 'icon-menu', path: '/TestTree', title: '树列表',
              // 子菜单
              children: [
                { icon: 'icon-menu', path: '/TestTree', title: '树列表' },
                { icon: 'icon-menu', path: '/TestTree', title: '树列表' },
                { icon: 'icon-menu', path: '/TestTree', title: '树列表' },
                { icon: 'icon-menu', path: '/TestTree', title: '树列表' },
              ]
            },
            { icon: 'icon-menu', path: '/TestTree', title: '树列表', dot: '99' },
            { icon: 'icon-menu', path: '/TestTree', title: '树列表' },
          ]
        },
        {
          icon: 'icon-rili',
          path: '/WorkChat',
          title: '站内消息',
          // 子菜单
          children: [{ icon: 'icon-menu', path: '/TestTree', title: '树列表' },]
        },
      ]
    })

    /*
    *  菜单点击
    */
    const onMenuEvent = (resp) => {
      console.log('btnMenu', resp)

    }


    // 外框位置
    const popStyled = ref('');
    // 设置内容的高度
    const styled = ref('');
    let size = {
      top: 150,
      left: 400,
      height: 200,
      width: 150,
    };

    /**
* 样式生成
*/
    const initStyle = (_move) => {

      if (size.width <= 100) {
        return
      }

      if (size.height <= 100) {
        return
      }

      let _style = '';
      for (let p in size) {

        // 修改移动坐标
        if (_move) {
          switch (p) {
            case 'top':
              _style += p + ':' + size[p] + 'px;';
              break;
            case 'left':
              _style += p + ':' + size[p] + 'px;';
              break;
          }

        } else if (p == 'z-index') {
          _style += p + ':' + size[p] + ';';
        } else {
          _style += p + ':' + size[p] + 'px;';
        }
      }
      // console.log('drag.style', _style)
      return _style;
    };

    /** 调整高度 */
    const HandleChange = (resp) => {
      //  console.log('HandleChange', resp);

      switch (resp.named) {
        case 'handleL':
          size.width -= resp.value;
          // 调整左边位置
          size.left += resp.value;
          break;
        case 'handleX':
          // 默认命名调整宽度
          size.width += resp.value;
          break;
        case 'handleT':
          // 顶部把手,调整位置
          size.height -= resp.value;
          size.top += resp.value;
          break;

        case 'handleY':
          // 默认命名调整高度
          size.height += resp.value;
          break;

      }

      const _style = initStyle();

      // console.log('HandleChange.end', _style);
      if (_style) {
        styled.value = _style;
        popStyled.value = initStyle(true);
      }


    };

    popStyled.value = initStyle(true);
    styled.value = initStyle();

    return { the, onMenuEvent, styled, popStyled, HandleChange }
  }
}
</script>



<style lang='less' scoped>
.menu-page {
  position: relative;
  .qv-menu {
    background-color: #333;
    width: 100%;
  }

  &-box {
    display: flex;
  }

  .qv-handle-x {
    background-color: aqua;
    // width: 1rem;
  }

  &-title {
    background-color: aqua;
    height: 1.2rem;
  }

  .qv-handle-y {
    //height: 0.2rem;
    background-color: cadetblue;
  }
}
</style>